import { useState } from "react";
import TopNavict from "../compoments/TopNavict"
import login from "./styles/register.module.css"
import BottomBavict from "../compoments/bottomnav"
import { Checkbox } from 'antd';
import { message } from "antd";

const Register = () => {
    const [phone,setPhone] = useState("")
    const [code,setCode] = useState("")
    const [password,setPassword] = useState("")
    const [password1,setPassword1] = useState("")
    const [checked,setChecked] = useState(false)
    const [messageApi, contextHolder] = message.useMessage();
    const onChange = (e) => {
        console.log(`checked = ${e.target.checked}`);
        setChecked(e.target.checked);
    };
    const phoneChange = (e) => {
        setPhone(e.target.value)
    }
    const codeChange = (e) => {
        setCode(e.target.value)
    }
    const passwordChange = (e) => {
        setPassword(e.target.value)
    }
    const passwordChange1 = (e) => {
        setPassword1(e.target.value)
    }
    const submit = () => {
        const formData = {
            phone:phone,
            code:code,
            password:password,
            password1:password1
        }
        if(password === "" || password1 === "" || password !== password1){
            messageApi.open({
                type: 'error',
                content: '信息错误',
            });
        }else if(checked === false){
            messageApi.open({
                type: 'error',
                content: '请勾选协议',
            });
        }else{
            console.log(formData);
        }
    }
    return (
        <div>
            {contextHolder}
            <TopNavict/>
            <div className={login.line}>
            </div>
            <div className={login.form}>
                <div className={login.head}>
                    <div className={login.head_img}>
                        <img src="https://jimucake.com/views/default/skin/default//images/images/yonghu_ico.png" alt="" />
                    </div>
                    <div className={login.txt}>
                        用户注册
                    </div>
                </div>
                <div className={login.body}>
                    <div className={login.input}>
                        <span className={login.phone}>手机号:</span>
                        <div>
                            <input className={login.input_a} value={phone} onChange={phoneChange} type="text" placeholder="" />
                        </div>
                    </div>
                    <div className={login.input}>
                        <span className={login.phone}>密码:</span>
                        <div>
                            <input className={login.input_a} value={password} onChange={passwordChange} type="password" placeholder="" />
                        </div>
                    </div>
                    <div className={login.input}>
                        <span className={login.phone}>确认密码:</span>
                        <div>
                            <input className={login.input_a} value={password1} onChange={passwordChange1} type="password" placeholder="" />
                        </div>
                    </div>
                    <div className={login.input}>
                        <span className={login.phone}>验证码:</span>
                        <div className={login.input_code}>
                            <div>
                                <input className={login.input_c} value={code} onChange={codeChange} type="text" placeholder="" />
                            </div>
                            <div className={login.code_img}>
                                <img src="" alt="验证码" />
                            </div>
                        </div>
                    </div>
                    <div className={login.option}>
                        <Checkbox onChange={onChange} /><span className={login.user_txt}>用户协议</span>
                    </div>
                    <div className={login.submit}>
                        <div onClick={submit}>
                            登录
                        </div>
                    </div>
                </div>
            </div>
            <BottomBavict />
        </div>
        
    )
}

export default Register